<template>
  <view style="padding-bottom: 120rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :customBack="backToList"
      :title="title"
      :titleWidth="450"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-show="tabIndex == 0">
      <u-cell-group>
        <u-cell-item title="验收照片" :arrow="false" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item title="" :arrow="false" style="padding: 0;">
          <image-upload v-model="CompletionPhoto"></image-upload>
        </u-cell-item>

        <!-- <u-cell-item title="门店等级" :arrow="false">
					<u-radio-group v-model="form.DoorHandleInfo.Grade">
						<u-radio :name="1">A</u-radio>
						<u-radio :name="2">B</u-radio>
						<u-radio :name="3">C</u-radio>
					</u-radio-group>
				</u-cell-item> -->
        <u-cell-item title="模块化" :arrow="false">
          <u-radio-group v-model="form.DoorHandleInfo.Module">
            <u-radio :name="1">模块</u-radio>
            <u-radio :name="2">非模块</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="门头化" :arrow="false">
          <u-radio-group v-model="form.DoorHandleInfo.IsDoor">
            <u-radio :name="1">门头</u-radio>
            <u-radio :name="2">非门头</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="样机类型" :arrow="false">
          <u-checkbox-group @change="onPrototypeChange">
            <u-checkbox v-model="item.checked" v-for="(item, index) in prototypeList" :key="index" :name="item.name">
              {{ item.label }}
            </u-checkbox>
          </u-checkbox-group>
        </u-cell-item>
        <u-cell-item title="精选门店" :arrow="false">
          <u-radio-group v-model="form.DoorHandleInfo.IsGoodDoor">
            <u-radio :name="1">是</u-radio>
            <u-radio :name="0">否</u-radio>
          </u-radio-group>
        </u-cell-item>

        <u-cell-item title="备注" :arrow="false">
          <u-input inputAlign="right" type="textarea" placeholder="验收备注" v-model="form.Remake"></u-input>
        </u-cell-item>

        <block v-if="showReview">
          <u-gap height="40" bg-color="#f5f5f5"></u-gap>
          <review-form ref="reviewForm"></review-form>
        </block>
      </u-cell-group>
    </view>

    <view class="" v-if="tabIndex == 1"><relations :list="state.Dealer_RelationList"></relations></view>

    <view class="" v-if="tabIndex == 2">
      <basic-information
        v-if="state.ShowLevel == 1"
        :metadata="state.DataBaseInfo"
        :showOtherInfo="false"
        :showReview="false"
        :showGrade="false"
        :showParent="false"
        :loadCity="loadCity"
        :data="{
          Dealer_BaseInfo: state.First_Dealer_BaseInfo
        }"
      ></basic-information>

      <block v-if="state.ShowLevel == 2">
        <u-cell-item
          title="一级经销商名称"
          :arrow="false"
          :value="state.First_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <basic-information
          :level="2"
          :metadata="state.DataBaseInfo"
          :showOtherInfo="false"
          :showReview="false"
          :showGrade="false"
          :showParent="false"
          :loadCity="loadCity"
          :data="{
            Dealer_BaseInfo: state.Double_Dealer_BaseInfo
          }"
        ></basic-information>
      </block>

      <block v-if="state.ShowLevel == 3">
        <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item
          title="二级经销商名称"
          :arrow="false"
          :value="state.Double_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
      </block>
    </view>

    <view style="" v-if="tabIndex == 3">
      <module-apply
        @edit="() => onEdit(item, 1)"
        :selectType="1"
        :applyType="3"
        v-for="(item, index) in state.ModuleDetail"
        :key="index"
        :value="item"
        :index="index"
      ></module-apply>
    </view>

    <view style="" v-if="tabIndex == 4">
      <module-apply
        @edit="() => onEdit(item, 2)"
        :selectType="2"
        :applyType="3"
        v-for="(item, index) in state.ShellPrototypeDetail"
        :key="index"
        :value="item"
        :index="index"
      ></module-apply>
    </view>

    <view style="" v-if="tabIndex == 5">
      <module-apply
        @edit="() => onEdit(item, 3)"
        :selectType="3"
        :applyType="3"
        v-for="(item, index) in state.EntityPrototypeDetail"
        :key="index"
        :value="item"
        :index="index"
      ></module-apply>
    </view>

    <view class="btn-group-fixed">
      <u-button v-if="showReview" type="warning" @tap="submit">提交验收审核</u-button>
    </view>
    <u-toast ref="uToast" />

    <u-popup
      mode="bottom"
      height="80%"
      :border-radius="24"
      v-model="showApplyModal"
      :mask-close-able="true"
      :showLoading="false"
      :async-close="true"
    >
      <view class="" style="padding-bottom: 120rpx;position: relative;">
        <view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">模块样机验收</view>
        <module-apply-form
          ref="moduleApplyForm"
          :applyType="2"
          :loadForm="loadForm"
          :selectType="selectType"
        ></module-apply-form>
        <view class="btn-group-absolute u-flex">
          <u-button size="medium" @tap="showApplyModal = false">取消</u-button>
          <u-button type="warning" @tap="moduleAcceptance" size="medium">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '模块及样机验收审核',

      tabList: [
        { name: '审核信息' },
        { name: '销售业务关系' },
        { name: '基本信息' },
        { name: '模块验收' },
        { name: '空壳样机验收' },
        { name: '实体样机验收' }
      ],
      tabIndex: 0,

      selectType: 1,

      showReview: false,

      moduleList: [],
      shellPrototypeList: [],
      entityPrototypeList: [],

      showApplyModal: false,
      loadForm: false,
      loadCity: false,

      areaCode: [],

      state: {
        ApplicationDate: null,
        ApplicationRemake: '',
        ApplyForPhoto: [],
        CompletionPhoto: [],
        DataBaseInfo: {},
        Dealer_RelationList: [],
        DoorHandleInfo: {},
        DoorPhotoList: [],
        Door_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        EntityPrototypeDetail: [],
        FinalAuditNote: '',
        FirstAuditNote: '',
        First_Dealer_BaseInfo: {},
        LogisticsList: [],
        ModuleDetail: [],
        ModultMedalsDetail: [],
        OutdoorSuitsDetail: [],
        ReviewAuditNote: '',
        ShellPrototypeDetail: [],
        ShowLevel: null,
        StateName: '',
        State: null
      },

      applyPhoto: [],
      CompletionPhoto: [],

      prototypeList: [{ label: '空壳样机', name: 1, checked: false }, { label: '实体样机', name: 2, checked: false }],

      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',

      form: {
        DealerId: null,
        AcceptanceAuditId: '',
        CheckPhoto: '',
        Remake: '',
        DoorHandleInfo: {
          Grade: 0,
          Module: null,
          IsDoor: null,
          IsPrototype: -1,
          IsGoodDoor: -1
        },
        ModuleList: [],
        ShellPrototypeList: [],
        EntityPrototypeList: [],
        OutdoorSuitsList: [],
        MedalsList: [],
        State: '',
        AuditRemark: ''
      }
    };
  },

  onLoad(options) {
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }
    if (options.Id) {
      this.form.AcceptanceAuditId = options.Id;
    }
    this.init();

    this.$setTitle(this.title);
  },

  methods: {
    backToList() {
      uni.navigateBack();
    },

    onPrototypeChange(e) {
      console.log(e);
      if (e.length == 2) {
        this.form.DoorHandleInfo.IsPrototype = 3;
      } else {
        this.form.DoorHandleInfo.IsPrototype = e[0];
      }
    },

    onCityChange(e) {
      if (e.province) {
        this.form.Delivery_ProvinceId = e.province.value;
      }
      if (e.city) {
        this.form.Delivery_CityId = e.city.value;
      }
      if (e.area) {
        this.form.Delivery_DistrictId = e.area.value;
      }
    },

    submit() {
      this.form.CheckPhoto = this.CompletionPhoto.map(item => item.Value).join(',');

      const selectedPrototypeList = this.prototypeList.filter(item => item.checked == true).map(item => item.name);

      if (selectedPrototypeList.includes(1) && selectedPrototypeList.includes(2)) {
        this.form.DoorHandleInfo.IsPrototype = 3;
      } else if (!selectedPrototypeList[0]) {
        this.form.DoorHandleInfo.IsPrototype = -1;
      } else {
        this.form.DoorHandleInfo.IsPrototype = selectedPrototypeList[0];
      }

      this.form.State = this.$refs.reviewForm.form.State;
      this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

      if (!this.form.State) {
        this.$u.toast('请选择审核状态');
        return false;
      }

      console.log(this.form);
      this.$u.api.approvalModuleCheck(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            back: true
          });
        }
      });
    },

    addModuleClick(selectType) {
      this.loadForm = false;
      this.selectType = selectType;
      this.showApplyModal = true;
    },

    onEdit(item, selectType) {
      this.loadForm = true;
      this.showApplyModal = true;
      this.selectType = selectType;

      this.$nextTick(() => {
        this.$refs.moduleApplyForm.initForm(Object.assign({}, item));
      });
    },

    moduleAcceptance() {
      const moduleApplyForm = this.$refs.moduleApplyForm.form;
      moduleApplyForm.Product.AmountSubtotal = this.$refs.moduleApplyForm.subtotal;

      const currentGroupId = this.$refs.moduleApplyForm.GroupId;

      let current;
      if (this.selectType == 1) {
        current = this.state.ModuleDetail.find(item => item.GroupId == currentGroupId);
      }
      if (this.selectType == 2) {
        current = this.state.ShellPrototypeDetail.find(item => item.GroupId == currentGroupId);
      }
      if (this.selectType == 3) {
        current = this.state.EntityPrototypeDetail.find(item => item.GroupId == currentGroupId);
      }
      current &&
        current.ApplyList.forEach(apply => {
          apply.ProductList.forEach(product => {
            product.CheckNumber = parseInt(moduleApplyForm.Product.CheckNumber);
            product.DifferencesNum = moduleApplyForm.Product.Number - product.CheckNumber;
            product.CheckTime = moduleApplyForm.ApplyTime;
            product.CheckRemark = moduleApplyForm.Remark;
          });
        });

      this.showApplyModal = false;
    },

    init() {
      this.$u.api
        .getModuleAcceptanceReviewDetail({
          DealerId: this.form.DealerId,
          SelectType: this.selectType,
          AcceptanceAuditId: this.form.AcceptanceAuditId
        })
        .then(res => {
          console.log(res);
          const { ResultCode, ResultData } = res;
          if (ResultCode === 1) {
            this.state = ResultData;

            if (this.vuex_user.ManagerId == res.NextManagerId) {
              this.showReview = true;
            }

            const {
              ModuleDetail,
              ShellPrototypeDetail,
              EntityPrototypeDetail,
              ApplyForPhoto,
              CompletionPhoto,
              DoorHandleInfo
            } = ResultData;

            if (ModuleDetail) {
              ModuleDetail.forEach(item => (item.editable = true));
              this.form.ModuleList = ModuleDetail;
            }
            if (ShellPrototypeDetail) {
              ShellPrototypeDetail.forEach(item => (item.editable = true));
              this.form.ShellPrototypeList = ShellPrototypeDetail;
            }
            if (EntityPrototypeDetail) {
              EntityPrototypeDetail.forEach(item => (item.editable = true));
              this.form.EntityPrototypeList = EntityPrototypeDetail;
            }

            if (ApplyForPhoto) {
              this.applyPhoto = ApplyForPhoto.split(',').map(item => {
                return {
                  Value: item
                };
              });
            }

            if (CompletionPhoto) {
              this.CompletionPhoto = CompletionPhoto.split(',').map(item => {
                return {
                  Value: item
                };
              });
            }

            if (DoorHandleInfo.IsPrototype == 3) {
              this.prototypeList.forEach(item => (item.checked = true));
            } else {
              this.prototypeList.forEach(item => (item.checked = item.name == DoorHandleInfo.IsPrototype));
            }

            this.form.DoorHandleInfo = { ...this.form.DoorHandleInfo, ...DoorHandleInfo };

            this.loadCity = true;
          }
        });
    },

    getProductList(brandId, selectType) {
      return new Promise((relove, reject) => {
        this.$u.api
          .getProductDic({
            SelectType: selectType,
            BrandId: brandId
          })
          .then(res => {
            const { ResultCode, ProductList } = res;
            if (ResultCode === 1) {
              relove(ProductList);
            }
          });
      });
    }
  }
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
